<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school :activeList="activeList" load-school @click="schoolChange" @visible="threeSchoolVisible=$event"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
          <div style="display: flex; justify-content: space-between; align-items: center;" :style="threeSchoolVisible ? '' : 'padding-left: 16px'">
            <b>当前学校：{{ query.schoole_name || "暂无学校" }}</b>
            <el-select
                clearable
                size="mini"
                :disabled="!query.schoole_id"
                v-model="query.title"
                placeholder="请输入年级"
                @change="reload"
                style="margin-left: 16px"
            >
              <el-option
                  :value="item.id"
                  :label="item.title"
                  v-for="(item, index) in nianji"
                  :key="index"
              />
            </el-select>
          </div>
          <div class="ele-form-actions">
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                class="ele-btn-icon"
                :disabled="!selection.length"
                @click="removeBatch"
            >删除
            </el-button>
            <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="openEdit(null)"
            >添加
            </el-button>
          </div>
        </div>
        <!-- 数据表格 -->
        <el-table
            border
            lazy
            ref="table"
            :data="data"
            v-loading="loading"
            height="calc(100vh - 315px)"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column
              label="序号"
              width="55"
              align="center"
              type="index"
          >
            <template slot-scope="scope">
                <span
                    v-text="$setTableIndex(query.page, query.limit, scope.$index)"
                >
                </span>
            </template>
          </el-table-column>
          <el-table-column label="学校" align="center" prop="title">
            <template
            ><div>
              {{ query.schoole_name }}
            </div></template
            >
          </el-table-column>
          <el-table-column label="年级" align="center" prop="title" />

          <el-table-column
              label="说明"
              align="center"
              prop="remark"
              width="200"
          />
          <el-table-column
              label="排序"
              align="center"
              prop="sort"
              width="50"
          />
          <el-table-column
              label="创建时间"
              align="center"
              prop="create_time"
              width="200"
          >
            <template slot-scope="scope">{{
                scope.row.create_time
                    ? $util.toDateString(scope.row.create_time)
                    : "暂无"
              }}</template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="200"
              :resizable="true"
          >
            <template slot-scope="{ row }">
              <el-link
                  type="text"
                  :underline="false"
                  icon="el-icon-edit"
                  @click="openEdit(row)"
              >修改
              </el-link>
              <el-popconfirm
                  class="ele-action"
                  title="确定要删除该班级吗？"
                  @confirm="remove(row)"
              >
                <el-link
                    type="text"
                    slot="reference"
                    :underline="false"
                    icon="el-icon-delete"
                >删除
                </el-link>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="getData"
        />
      </el-card>
    </div>
    <!-- 编辑弹窗 -->
    <indexList-edit
      :id="query.schoole_id"
      :name="query.schoole_name"
      :data="current"
      :visible.sync="showEdit"
      @done="reload"
    />
    <!-- 导入弹窗-->
    <!-- <user-import
        :visible.sync="showImport"
        @done="reload"/> -->
  </div>
</template>
  
  <script>
import { mapGetters } from "vuex";
import indexListEdit from "./indexList-edit.vue";
import regions from "ele-admin/packages/regions";
import threeSchool from "@/components/three_schoole.vue";

export default {
  name: "SystemUser",
  components: { indexListEdit, threeSchool },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      threeSchoolVisible: true,
      // 省市区数据
      regions: regions,
      row_span: 20,
      // 选中的省市区
      city: [],
      loading: false, // 表格加载状态
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [], // 表格数据接口
      // 表格搜索条件
      query: {
        page: 1,
        limit: 20,
        title: "",
        schoole_id: "",
        schoole_name: "",
      },
      streetsList: [],
      schoolList: [],
      activeList: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
      schoolListData: [],
      nianji: [],
    };
  },
  mounted() {
    this.$http
      .get("/schoole/index", {
        params: {
          page: 1,
          limit: 1,
        },
      })
      .then((res) => {
        if (res.data.count == 0) return;
        this.query = {
          page: 1,
          limit: 20,
          title: "",
          schoole_id: res.data.data[0].id,
          schoole_name: res.data.data[0].title,
        };
        this.activeList = [
          res.data.data[0].province_code,
          res.data.data[0].city_code,
          res.data.data[0].district_code,
          res.data.data[0].streets_code,
        ];
        this.getData();
      })
      .catch((e) => {
        this.loading = false;
        this.$message.error(e.message);
      });
  },
  watch: {
    "query.schoole_id": {
      handler: function () {
        this.getGradeList();
      },
      deep: true,
    },
  },
  methods: {
    getGradeList() {
      this.$http
        .get("/student/getGrade", {
          params: { schoole_id: this.query.schoole_id },
        })
        .then((res) => {
          this.nianji = res.data.data;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    schoolChange(data) {
      this.query = {
        page: 1,
        limit: 20,
        title: "",
        schoole_id: data.value,
        schoole_name: data.label,
      };
      this.getData();
    },
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.$http
        .get("/grade/index", { params: this.query })
        .then((res) => {
          this.loading = false;
          this.total = res.data.count;
          this.data = res.data.data;
          this.getGradeList();
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    getSchoolListData() {
      this.loading = true;
      this.$http
        .get("/schoole/index", {
          params: {
            page: 1,
            limit: 9999,
            province_code: this.query.province_code,
            city_code: this.query.city_code,
            district_code: this.query.district_code,
            streets_code: this.query.streets_code,
          },
        })
        .then((res) => {
          this.schoolListData = res.data.data;
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query.title = "";
      this.query.page = 1;
      this.reload();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .post(`/grade/delete`, { id: row.id })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的年级吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          this.$http
            .post("/grade/delete", { id: this.selection.map((d) => d.id) })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
  },
};
</script>
  
  <style scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.right_show {
  position: absolute;
  left: -15px;
  top: 2px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  background-color: #1890ff;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  width: 30px;
  color: #fff;
  cursor: pointer;
}
</style>
  